// 简单的数据可视化库

class SimpleChart {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.width = this.container.clientWidth;
        this.height = this.container.clientHeight;
    }
    
    // 绘制柱状图
    drawBarChart(data, options = {}) {
        // 清空容器
        this.container.innerHTML = '';
        
        // 默认配置
        const config = {
            margin: { top: 20, right: 20, bottom: 30, left: 40 },
            barColor: '#3498db',
            labelColor: '#2c3e50',
            valueColor: '#7f8c8d',
            ...options
        };
        
        // 计算实际绘图区域尺寸
        const chartWidth = this.width - config.margin.left - config.margin.right;
        const chartHeight = this.height - config.margin.top - config.margin.bottom;
        
        // 创建SVG容器
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', this.width);
        svg.setAttribute('height', this.height);
        svg.style.display = 'block';
        
        // 创建绘图区域组
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('transform', `translate(${config.margin.left},${config.margin.top})`);
        
        // 计算最大值用于缩放
        const maxValue = Math.max(...data.map(d => d.value));
        
        // 计算柱状图宽度和间距
        const barWidth = chartWidth / data.length * 0.8;
        const barSpacing = chartWidth / data.length * 0.2;
        
        // 绘制柱状图
        data.forEach((item, index) => {
            const x = index * (barWidth + barSpacing);
            const barHeight = (item.value / maxValue) * chartHeight;
            const y = chartHeight - barHeight;
            
            // 创建柱子
            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('x', x);
            rect.setAttribute('y', y);
            rect.setAttribute('width', barWidth);
            rect.setAttribute('height', barHeight);
            rect.setAttribute('fill', config.barColor);
            
            // 创建数值标签
            const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            valueText.setAttribute('x', x + barWidth / 2);
            valueText.setAttribute('y', y - 5);
            valueText.setAttribute('text-anchor', 'middle');
            valueText.setAttribute('fill', config.valueColor);
            valueText.setAttribute('font-size', '12px');
            valueText.textContent = item.value.toFixed(1);
            
            // 创建标签
            const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            label.setAttribute('x', x + barWidth / 2);
            label.setAttribute('y', chartHeight + 20);
            label.setAttribute('text-anchor', 'middle');
            label.setAttribute('fill', config.labelColor);
            label.setAttribute('font-size', '12px');
            label.textContent = item.label;
            
            g.appendChild(rect);
            g.appendChild(valueText);
            g.appendChild(label);
        });
        
        svg.appendChild(g);
        this.container.appendChild(svg);
    }
    
    // 绘制饼图
    drawPieChart(data, options = {}) {
        // 清空容器
        this.container.innerHTML = '';
        
        // 默认配置
        const config = {
            colors: ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6', '#1abc9c'],
            labelColor: '#2c3e50',
            ...options
        };
        
        // 创建SVG容器
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', this.width);
        svg.setAttribute('height', this.height);
        svg.style.display = 'block';
        
        // 计算中心点和半径
        const centerX = this.width / 2;
        const centerY = this.height / 2;
        const radius = Math.min(centerX, centerY) * 0.8;
        
        // 计算总值
        const total = data.reduce((sum, item) => sum + item.value, 0);
        
        // 绘制扇形
        let startAngle = 0;
        data.forEach((item, index) => {
            const sliceAngle = (item.value / total) * 2 * Math.PI;
            const endAngle = startAngle + sliceAngle;
            
            // 计算起点和终点坐标
            const startX = centerX + radius * Math.cos(startAngle);
            const startY = centerY + radius * Math.sin(startAngle);
            const endX = centerX + radius * Math.cos(endAngle);
            const endY = centerY + radius * Math.sin(endAngle);
            
            // 创建路径
            const largeArcFlag = sliceAngle > Math.PI ? 1 : 0;
            const pathData = [
                `M ${centerX} ${centerY}`,
                `L ${startX} ${startY}`,
                `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
                'Z'
            ].join(' ');
            
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('d', pathData);
            path.setAttribute('fill', config.colors[index % config.colors.length]);
            
            svg.appendChild(path);
            
            // 添加标签
            const labelAngle = startAngle + sliceAngle / 2;
            const labelRadius = radius * 0.7;
            const labelX = centerX + labelRadius * Math.cos(labelAngle);
            const labelY = centerY + labelRadius * Math.sin(labelAngle);
            
            const labelText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            labelText.setAttribute('x', labelX);
            labelText.setAttribute('y', labelY);
            labelText.setAttribute('text-anchor', 'middle');
            labelText.setAttribute('dominant-baseline', 'middle');
            labelText.setAttribute('fill', config.labelColor);
            labelText.setAttribute('font-size', '12px');
            labelText.textContent = item.label;
            
            svg.appendChild(labelText);
            
            startAngle = endAngle;
        });
        
        this.container.appendChild(svg);
    }
    
    // 绘制折线图
    drawLineChart(data, options = {}) {
        // 清空容器
        this.container.innerHTML = '';
        
        // 默认配置
        const config = {
            margin: { top: 20, right: 20, bottom: 30, left: 40 },
            lineColor: '#3498db',
            pointColor: '#2c3e50',
            labelColor: '#2c3e50',
            ...options
        };
        
        // 计算实际绘图区域尺寸
        const chartWidth = this.width - config.margin.left - config.margin.right;
        const chartHeight = this.height - config.margin.top - config.margin.bottom;
        
        // 创建SVG容器
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', this.width);
        svg.setAttribute('height', this.height);
        svg.style.display = 'block';
        
        // 创建绘图区域组
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('transform', `translate(${config.margin.left},${config.margin.top})`);
        
        // 计算最大值和最小值
        const values = data.map(d => d.value);
        const maxValue = Math.max(...values);
        const minValue = Math.min(...values);
        
        // 创建路径点
        const points = data.map((item, index) => {
            const x = (index / (data.length - 1)) * chartWidth;
            const y = chartHeight - ((item.value - minValue) / (maxValue - minValue)) * chartHeight;
            return { x, y, label: item.label, value: item.value };
        });
        
        // 绘制折线
        const pathData = points.map((point, index) => 
            `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`
        ).join(' ');
        
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke', config.lineColor);
        path.setAttribute('stroke-width', '2');
        
        g.appendChild(path);
        
        // 绘制数据点
        points.forEach(point => {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', point.x);
            circle.setAttribute('cy', point.y);
            circle.setAttribute('r', '4');
            circle.setAttribute('fill', config.pointColor);
            
            g.appendChild(circle);
        });
        
        svg.appendChild(g);
        this.container.appendChild(svg);
    }
}